<template>
    <el-form ref="form" :model="form" class="size-auto" :rules="rules" :inline="true" size="medium" label-width="80px">
        <el-row :gutter="24">
            <el-col :xl="5" :lg="7">
                <el-form-item label="审核" prop="principal">
                    <el-select v-model="form.principal" clearable placeholder="请选择" @change="handleChange">
                        <el-option
                            v-for="item in userOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :xl="5" :lg="7">
                <el-form-item label="上级批复" prop="higherPrincipal">
                    <el-select v-model="form.higherPrincipal" placeholder="请选择">
                        <el-option
                            v-for="item in superLevelUserOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>

<script>
import { OrgModel } from '@/models' 

export default {
    name: 'ApprovalForm',
    props: {
        form: {
            type: Object,
            default: () => ({
                tabulation: null,
                principal: null,
                higherPrincipal: null
            })
        },
    },
    data() {
        return {
            orgModel: new OrgModel(),
            userOptions: [],
            superLevelUserOptions: [],
            rules: {
                principal: [{ validator: this.validPrincipal, trigger: 'change' }],
                higherPrincipal: [{ validator: this.validHigherPrincipal, trigger: 'change' }]
            },
            defalutUserId: null
        }
    },
    created() {
        // 当前登录账号id即为制表人id
        this.form.tabulation = this.$store.getters.avatar.id
        this.getUserByOrg(this.form.tabulation)
        this.getSuperLevelUser(this.form.tabulation)
    },
    methods: {
        validPrincipal(rule, value, callback) {
            if (value) {
                callback()
            } else {
                if (this.form.higherPrincipal) {
                    callback(new Error('请选择审核人'))
                } else {
                    callback()
                }
            }
        },
        validHigherPrincipal(rule, value, callback) {
            if (value) {
                callback()
            } else {
                if (this.form.principal) {
                    callback(new Error('请选择上级批复'))
                } else {
                    callback()
                }
            }
        },
        handleValidate() {
            return new Promise((resolve) => {
                this.$refs['form'].validate(valida => {
                    resolve(valida)
                })
            })
        },
        handleChange(val) {
            if (val) {
                this.superLevelUserOptions.some(item => {
                    if (item.isPrincipal) {
                        this.form.higherPrincipal = item.value
                        return true
                    }
                })
            } else {
                this.form.higherPrincipal = null
            }
        },
        // 获取机构下人员
        getUserByOrg(id) {
            this.orgModel.getUserByOrg({ userId: id }).then(res => {
                this.userOptions = res.map(item => {
                    return {
                        value: item.userId,
                        label: item.name
                    }
                })
            })
        },
        // 根据当前用户查询上级部门用户
        getSuperLevelUser(id) {
            this.orgModel.getSuperLevelUser({ userId: id }).then(res => {
                this.superLevelUserOptions = res.map(item => {
                    // 如果是新增，把负责人一项默认值设置为当前部门负责人
                    if (this.form.principal && item.isPrincipal) {
                        this.form.higherPrincipal = item.userId
                    }
                    return {
                        value: item.userId,
                        label: item.name,
                        isPrincipal: item.isPrincipal
                    }
                })
            })
        }
    }
}
</script>

<style lang="scss" scoped>

</style>
